<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Markdown 编辑器</title>
<link rel="stylesheet" href="styles3.css">
<!-- 引入高亮.js库的深色主题样式表 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
</head>
<body>

<div class="editor-container">
    <textarea id="markdown-input" placeholder="在这里输入Markdown文本..."></textarea>
    <div id="html-preview"></div>
</div>
<!-- 引入 highlight.min.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
<!-- 引入 highlightjs-lline-numbers.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
<script>
// 当DOM内容加载完成后执行函数
document.addEventListener('DOMContentLoaded', function() {
    // 获取Markdown输入框和HTML预览框的DOM对象
    const markdownInput = document.getElementById('markdown-input');
    const htmlPreview = document.getElementById('html-preview');

    // 实时预览Markdown内容
    markdownInput.addEventListener('input', () => {
        // 获取Markdown输入框中的内容
        const markdownContent = markdownInput.value;
        // 使用marked库将Markdown内容转换为HTML，并显示在预览框中
        htmlPreview.innerHTML = marked.parse(markdownContent);


        // 高亮代码块并添加行号
        // 如果 Highlight.js 已正确加载，则执行以下代码块
        if (typeof hljs !== 'undefined') {
        // 选取页面上所有 pre 标签内的 code 标签，并对它们进行高亮显示及行号添加
        document.querySelectorAll('pre code').forEach((block) => {
            // 对单个代码块进行语法高亮
            hljs.highlightElement(block);
            // 为单个代码块添加行号
            hljs.lineNumbersBlock(block);
        });
        } else {
            // 如果 Highlight.js 未正确加载，则在控制台输出错误信息
            console.error('Highlight.js has not been loaded correctly.');
        }
    });
});

</script>

</body>
</html>